import React, { Component } from 'react'
import {
	Container,
	Left,
	Content,
	List,
	ListItem,
	Text,
	Thumbnail,
	Root
} from 'native-base'
import { View, TouchableOpacity, DeviceEventEmitter } from 'react-native'
import { Actions } from 'react-native-router-flux'
import HeaderWhite from '../../../components/header/headerWhite'
import Forbiduser from '../../../components/forbiduser'
import Iconfont from '../../../components/iconfont'
import commonStyle from '../../../libs/commonStyle'
import { list, addInfo } from './data'
import showUploadPanel from '../../../components/upload'
import { connect } from 'react-redux' // 引入connect函数
import * as userAction from '../../../redux/actions/user'

class Information extends Component {
	constructor(props) {
		super(props)
		this.state = {
			list: list
		}
	}
	componentDidMount() {
		this.props.getUserInfo && this.props.getUserInfo()
		DeviceEventEmitter.addListener('forbid.user', () => {
			global.Pop.show(<Forbiduser wechat={this.props.serviceInfo.wechat} />,{animationType: 'slide-up'})
		})
	}
	_onPress(item) {
		if (item.action) {
			Actions[item.action]()
		} else {
			Actions.oneInput({
				content: item.tips,
				title: '修改' + item.title,
				placeholder: '请输入' + item.title,
				// apiMethod: 'updateUserInfo',
				params: { ...this.props.user },
				paramKey: item.key,
				vali: item.vali
			})
		}
	}
	render() {
		const { user } = this.props
		let userInfoList = addInfo(list, user || {})
		return (
			<Root>
				<Container style={{ backgroundColor: '#f5f5f5' }}>
					<HeaderWhite title="我的资料" hasLeft />
					<Content>
						{userInfoList.map(item => {
							return (
								<List
									key={item.type}
									style={{ backgroundColor: '#fff' }}
								>
									<ListItem last={item.last}>
										<Left>
											<Text
												style={[commonStyle.colorTips]}
											>
												{item.title}
											</Text>
										</Left>
										<TouchableOpacity
											activeOpacity={1}
											style={{
												flexDirection: 'row',
												alignItems: 'center',
												justifyContent: 'flex-end',
												flex: 2,
												textAlign: 'right'
											}}
											onPress={() => {
												item.edit && this._onPress(item)
												item.upload &&
													showUploadPanel({
														_onSelect: source => {
															// TODO 更新user的headimgurl - updateUserInfo 更新数据
															source &&
																this.props
																	.updateUserInfo &&
																this.props.updateUserInfo(
																	{
																		key:
																			'headimgurl',
																		val: source
																	}
																)
														}
													})
											}}
										>
											<Text
												style={[
													!item.edit
														? commonStyle.colorGray
														: ''
												]}
											>
												{item.tips}
											</Text>
											{item.icon ? (
												<Thumbnail
													small
													source={{ uri: item.icon }}
												/>
											) : (
												<Text />
											)}
											<Iconfont
												name="right_line"
												style={[
													commonStyle.pl20,
													commonStyle.f36
												]}
											/>
										</TouchableOpacity>
									</ListItem>
									{item.last && (
										<View
											style={[
												commonStyle.h20,
												commonStyle.backgroundColorGray
											]}
										/>
									)}
								</List>
							)
						})}
					</Content>
				</Container>
			</Root>
		)
	}
}

export default connect(
	state => ({
		user: state.user.user,
		serviceInfo: state.login.serviceInfo
	}),
	dispatch => ({
		getUserInfo: () => dispatch(userAction.userInfo()),
		updateUserInfo: info => dispatch(userAction.updateUserInfo(info))
	})
)(Information)
